<template>
  <div>
      
      <div class="journalto">
            <div class="haerdto">
                <span class="iconfont icon-guanbi" @click="$router.push('/Home')"></span>
                <div class="datesto">
                    <div class="left">
                       <div class="weeck">
                          星期五
                       </div>
                       <div class="hours">
                         01/2022
                       </div>
                    </div>
                    <div class="right">
                        7
                    </div>
                </div>
            </div>
            <div class="centottos">
                <div class="po">
                    <div class="ptoiconfont">
                        <span class="iconfont icon-maomi"></span>
                    </div>
                    <div class="texticon">
                        每一顿饭都值得分享
                    </div>
                </div>
            </div>
            <div class="bottonsto">
                <div class="botonleftt">
                    <h3>
                        发布菜谱
                    </h3>
                    <div class="listss">
                        <div class="li"></div>
                        <div class="li"></div>
                        <div class="li twes">
                            <div>
                                可发10分钟视频
                            </div>
                            <div>
                                快来试试
                            </div>
                        </div>
                        <div class="li"></div>
                        <div class="li"></div>
                    </div>
                </div>
                <div class="botonright">
                    <h3>
                        发布笔记
                    </h3>
                    <div class="listss">
                        <div class="li big">
                            <span class="iconfont icon-shipin"></span>
                        </div>
                        <div class="li">
                            每一篇笔记都是一份
                        </div>
                        <div class="li">
                            美好回忆
                        </div>
                        <div class="li">
                            我们会将您的笔记
                        </div>
                        <div class="li">
                            记录在您的美食日记
                        </div>
                    </div>
                </div>
            </div>
            <div class="fobo">
                草稿箱
            </div>
      </div>
  </div>
</template>

<script>


export default {
        data(){
            return{

            }
        },
       
}
</script>

<style lang="less">
    .journalto{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #ffff;
        z-index: 20;
        // padding-top: 10px;
        box-sizing: border-box;
        .haerdto{
            width: 100%;
            height: 46px;
            // margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .iconfont{
               font-size: 20px;
               font-weight: 550;
               padding-left: 10px;
               font-weight: 600;
               box-sizing: border-box;
            }
            .datesto{
                display: flex;
                height: 100%;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                line-height: 18px;
                .left{
                    font-weight: 600;
                    font-size: 12px;
                    height: 100%;
                    padding-top: 10px;
                    box-sizing: border-box;
                    line-height: 15px;
                    margin-right: 10px;
                    .weeck{
                        // margin-top: 10px;
                        font-weight: 600;
                    }
                    .hours{
                         font-weight: 600;
                    }
                }
                .right{
                     font-weight: 550;
                     height: 100%;
                     line-height: 46px;
                     font-size: 30px;
                }
            }
        }
        .centottos{
            width: 100%;
            height: 230px;
            position: relative;
            .po{
                width: 100%;
                position: absolute;
                bottom:50px;
                left: 0px;
            }
            .ptoiconfont{
                width: 100%;
                height: 43px;
                text-align: center;
                line-height: 43px;
                span{
                    font-size: 36px;
                }
            }
            .texticon{
                width: 100%;
                margin-top: 5px;
                height: 20px;
                font-size: 16px;
                text-align: center;
                line-height: 20px;
                font-weight: 550;
                color:#929292;
            }
        }
        .bottonsto{
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .botonleftt{
                width: 48%;
                height: 250px;
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
                background-color: #b6cdb3;
                h3{
                    width: 100%;
                    height: 37px;
                    text-align: center;
                    line-height: 37px;
                    font-size: 16px;
                    color: #38722e;
                }
                .listss{
                    width: 100%;
                    margin-top: 10px;
                    .li{
                        width: 100%;
                        height: 18px;
                        margin-bottom: 10px;
                        background-color: #dae6da;
                         &.twes{
                            height: 65px;
                            padding: 10px;
                            box-sizing: border-box;
                            font-size: 14px;
                            line-height: 20px;
                            font-weight: 600;
                            color: #709b6b;
                            div{
                                width: 100%;
                                text-align: center;
                            }
                        }
                    }
                    .li:nth-child(2){
                        width: 65%;
                    }
                     .li:nth-child(4){
                        width: 80%;
                    }
                }
            }
            .botonright{
                width: 48%;
                height: 250px;
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
                background-color: #fee193;
                h3{
                    width: 100%;
                    height: 37px;
                    text-align: center;
                    line-height: 37px;
                    font-size: 16px;
                    color: #c7a03a;
                }
                .listss{
                    width: 100%;
                    margin-top: 10px;
                     .li{
                        width: 100%;
                        height: 18px;
                        margin-bottom: 10px;
                        background-color: #fff5da;
                        text-align:left;
                        font-size: 10px;
                        font-weight: 600;
                        line-height: 19px;
                        color:#cfad50;
                        padding-left: 5px;
                        box-sizing: border-box;
                        &.big{
                            height: 65px;
                           
                            line-height: 20px;
                            font-weight: 600;
                            text-align: center;
                            line-height: 60px;
                            span{
                                font-size: 30px;
                            }
                        }
                    }
                      .li:nth-child(3){
                        width: 65%;
                    }
                    .li:nth-child(4){
                        width: 95%;
                    }
                     .li:nth-child(5){
                        width: 80%;
                    }
                }
               
            }
        }
        .fobo{
            width: 100%;
            margin-top: 50px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color:#929292;
        }
        
    }
</style>